<template>
  <div class="loginbox">
      <div class="login">
          <div class="loginimg">
              <img src="../assets/logo.png" />
          </div>
          <el-form ref="form" :model="form">
              <el-form-item>
                  <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-input v-model="form.pass"></el-input>
              </el-form-item>
              <el-form-item class="left">
                  <el-button type="primary" @click="onSubmit">登陆</el-button>
                  <el-button>取消</el-button>  
              </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            form:{
                name:"",
                pass:"",
            },
        };
    },
    methods: {
        onSubmit:function(){
            if(this.form.name=="admin"&&this.form.pass=="123"){
                this.$router.push("/home")
            }else{
                alert('用户名或密码输入错误')
            }
        }
    },
};
</script>

<style scoped>
.loginbox {
    width:100%;
    height:100%;
    background-color: #2b4b6b;
}
.login {
    width:400px;
    height:300px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 3px;
}
.loginimg {
    width:130px;
    height:130px;
    background-color: #fff;
    position: absolute;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 10px #eee;
}
.loginimg img{
    width:100%;
    height:100%;
    border-radius: 50%;
    padding: 0 10px;
    box-sizing: border-box;
}
.el-form {
    position: absolute;
    bottom: 0px;
    left: 20px;
    width: 350px;
}
.left {
    display: flex;
    justify-content: end;
}
</style>
